<template>
  <div>
    <div class="charts-type">
      <div class="shade" :class="{ dispalynone: shadeDisplay }"></div>
      <el-row :gutter="12" style="display: flex;flex-wrap: wrap;">
        <el-col
          :span="8"
          v-for="item in chartsTypes"
          :key="item.id"
          style="cursor:move;"
        >
          <el-card
            class="charts-card"
            :class="{ imgActive: item.id === chartsConData.type1 }"
            shadow="hover"
          >
            <el-image
              @click="renderData(item.id, item.title)"
              style="width:100%;height:100%"
              :src="item.imgSrc"
              fit="contain"
            ></el-image>
          </el-card>
          <p class="charts-title">{{ item.title }}</p>
        </el-col>
      </el-row>
      <selectWaysDialog
        @editData="editData"
        @dealData="dealData"
        :mychartsDom="$attrs.mychartsDom"
        :oldType="oldType"
        :show.sync="newChartsState"
      ></selectWaysDialog>
    </div>
    <chartsDialog :show.sync="show"> </chartsDialog>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import selectWaysDialog from '@/components/chartsType/selectWaysDialog.vue'
import chartsDialog from '@/components/chartsType/chartsDialog'

const { mapState, mapMutations } = createNamespacedHelpers('charts')
const chartsConStore = createNamespacedHelpers('chartsCon')

export default {
  name: 'chartsType',
  inheritAttrs: false,
  props: {},
  data() {
    return {
      oldDropdata: '', // 上一次点击的图形类型
      newChartsState: false,
      show: false,
      title: '',
      oldType: ''
    }
  },
  methods: {
    editData() {
      this.show = true
    },
    // 弹窗点击确定后的回调
    dealData(ways) {
      let data = this.chartsConData.type1
      this.$emit('renderData', data)
    },
    renderData(data, name) {
      // this.setChartsData1({ data: [] })
      this.setChartsConData({ chartName: name })
      this.oldDropdata = data
      let tp
      this.title = name
      switch (data.substring(0, 1)) {
        case 'b':
          tp = '1'
          break
        case 'z':
          tp = '2'
          break
        case 'l':
          tp = '3'
          break
        case 'd':
          tp = '4'
          break
        case 'c':
          tp = '5'
          break
      }
      this.oldType = this.chartsConData.type1
      this.setChartsConData({ type: tp, type1: data })
      if (!this.$route.params.id || this.$route.params.id === 'new') {
        this.setChartsConData({ titleName: this.title })
      }
      this.newChartsState = true
    },
    getAllImg() {
      this.setState([{ key: 'chartsTypes', value: [] }])
      this.filterCharts()
    },
    ...mapMutations([
      'setChartsConData',
      'setChartsData1',
      'setOldWays',
      'setshadeDisplay'
    ]),
    ...chartsConStore.mapMutations(['setState']),
    ...chartsConStore.mapActions(['filterCharts'])
  },
  computed: {
    ...mapState(['chartsConData', 'shadeDisplay']),
    ...chartsConStore.mapState({
      chartsTypeAll: 'chartsTypeAll',
      chartsTypes: 'chartsTypes',
      currentType: 'currentType',
      chartKeywords: 'chartKeywords'
    })
  },
  mounted() {
    this.getAllImg()
    this.setOldWays(this.chartsConData.ways)
  },
  watch: {
    currentType(newval, oldval) {
      this.filterCharts()
    }
  },
  components: {
    selectWaysDialog,
    chartsDialog
  }
}
</script>

<style scoped>
.dispalynone {
  display: none;
}
.charts-type {
  position: relative;
}
.charts-title {
  color: #a7a7a7;
  text-align: center;
}
.shade {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #2b3a52;
  opacity: 0.5;
  z-index: 100;
}
.charts-card {
  border: 4px solid #fff !important;
  border-radius: 0 !important;
  background-color: #fff;
  box-sizing: border-box;
}
.charts-card.imgActive {
  border-color: #5bacff !important;
}
</style>
